<template>
  <div class="app-container">
    <AmQueryForm ref="AmQueryFormRef" v-show="recordConfig.showSearch" statistics
                 :schema="querySchema"
                 @query="$emit('paramsChange')"
    />
    <TableCard>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5" v-for="(operator, index) in tableOperations" :key="index">
          <el-button v-bind="operator.props"
                     v-hasPermi="operator.auth"
                     @click="handleOperatorClick(operator)">{{ operator.label }}</el-button>
        </el-col>
        <right-toolbar :columns="columns" :statistics="statistics"
                       :showSearch.sync="recordConfig.showSearch"
                       @queryTable="$emit('paramsChange')"
                       @changeView="handleChangeView"
        />
      </el-row>
      <div>
        <slot name="tabs" />
      </div>
      <el-table v-if="viewType === 'table'"
                v-loading="recordConfig.loading"
                :data="recordConfig.data"
                :border="Global.tableShowBorder">
        <el-table-column type="selection" width="55" fixed="left" align="center" />
        <el-table-column v-for="(column, index) in columns" v-bind="column" :key="index">
          <template v-slot:default="scope">
            <slot :name="`column-${column.prop}`" :row="scope.row">
              <template v-if="column.format">{{ column.format(scope.row[column.prop]) }}</template>
              <template v-else>{{ scope.row[column.prop] }}</template>
            </slot>
          </template>
        </el-table-column>
        <el-table-column v-if="rowActions.length > 0" label="操作" align="center" fixed="right"
                         :width="actionsColumnWidth"
                         class-name="small-padding fixed-width">
          <template v-slot:default="scope">
            <slot name="actions" v-bind="scope">
              <template v-for="(action, index) in rowActions">
                <el-tooltip :key="index" v-bind="rowActionTooltip(action, scope.row)" effect="light" placement="top">
                  <el-button v-bind="action.props"
                             :disabled="!!action.disabledCtrl ? action.disabledCtrl(scope.row) : false"
                             @click="handleButtonClick(scope.row, action)">{{ rowActionLabel(action, scope.row) }}</el-button>
                </el-tooltip>
              </template>
            </slot>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="viewType === 'table' && !statistics"
                  v-show="recordConfig.total > 0"
                  :total="recordConfig.total"
                  :page.sync="pagination.pageNum"
                  :limit.sync="pagination.pageSize"
                  @pagination="$emit('paramsChange')" />
      <div v-if="viewType === 'chart'">
        <slot name="chart" />
      </div>
    </TableCard>
    <slot name="extend"></slot>
  </div>
</template>

<script>
import AmQueryForm from "./AmQueryForm.vue";
import {isFunction, isUndefined, isString} from "lodash";

export default {
  name: 'AmBaseTable',
  components: {AmQueryForm},
  props: {
    statistics: Boolean,
    schema: {
      type: Array,
      default: () => []
    },
    actions: {
      type: Array,
      default: () => []
    },
    operations: {
      type: Array,
      default: () => []
    },
    recordConfig: {
      type: Object,
      default() {
        return {
          // 显示搜索条件
          showSearch: true,
          data: [],
          total: 0,
          loading: false,
        }
      }
    },
  },
  data() {
    return {
      viewType: 'table',
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  computed: {
    rowActionLabel() {
      return (action, row) => {
        if(isString(action.label)) {
          return action.label
        } else {
          return  action.label(row)
        }
      }
    },
    rowActionTooltip() {
      return (action, row) => {
        if(isString(action.tooltip)) {
          return {
            disabled: false,
            content: action.tooltip
          }
        } else if(isFunction(action.tooltip)) {
          return {
            disabled: !action.tooltip(row),
            content: action.tooltip(row) ? action.tooltip(row) : ''
          }
        } else {
          return {
            disabled: true,
            content: ''
          }
        }
      }
    },
    // 处理查询表单
    querySchema() {
      return this.schema.filter(item => item.showInQuery).map(item => {
        const props = {
          ...item.componentProps
        }
        return {
          label: item.label,
          prop: item.prop,
          component: item.component,
          componentProps: props,
        }
      })
    },
    // 处理表格列
    columns() {
      return this.schema.filter(item => item.showInTable).map(item => {
        const props = {
          align: 'center',
          ...(item.tableProps || {})
        }
        return {
          label: item.label,
          prop: item.prop,
          ...props,
        }
      })
    },
    // 行操作处理
    tableOperations() {
      return this.operations.map(action => {
        const props = {
          plain: true,
          size: 'mini',
          ...action.buttonProps,
        }
        return {
          ...action,
          props,
        }
      })
    },
    // 行操作处理
    rowActions() {
      return this.actions.map(action => {
        const props = {
          size: 'mini',
          type: 'text',
          ...action.buttonProps,
        }
        return {
          ...action,
          props,
        }
      })
    },
    actionsColumnWidth() {
      return this.rowActions.length * 80 + 'px'
    }
  },
  methods: {
    handleChangeView() {
      if(this.viewType === 'table') {
        this.viewType = 'chart'
      } else {
        this.viewType = 'table'
      }
    },
    handleButtonClick(row, action) {
      console.log(row, action);
      action.clickCB(row)
    },
    handleOperatorClick(operator) {
      operator.clickCB(operator)
    },
    getList() {},
    getQueryParams() {
      const queryParams = this.$refs.AmQueryFormRef.getParams();
      return {
        ...this.pagination,
        ...queryParams
      }
    }
  }
}
</script>
